<template>
	<view class="zb-box">
		<!-- 顶部信息 -->
		<view class="zb-top-box">
			<view class="zb-top-bg">
				<view class="zb-top-text-box">
					<text>今日收款</text>
					<text class="zb-top-num-text">{{todayNum}}</text>
					<text>笔</text>
				</view>
				<text class="zb-top-money">{{todayMoney}}</text>
			</view>
		</view>
		<!-- 账本筛选信息 -->
		<view class="zb-filter-box">
			<view class="zb-filter-left-box">
				<view class="zb-filter-left-menu-item" :class="selectMenuType == 0 ? 'zb-filter-left-menu-item-active' : ''" @tap="selectMenuTypeAction(0)">收入</view>
				<view class="zb-filter-left-menu-item" :class="selectMenuType == 1 ? 'zb-filter-left-menu-item-active' : ''" @tap="selectMenuTypeAction(1)">结算</view>
			</view>
			<view class="zb-filter-right-box" @tap="showSelectDateAction">
				<text>{{formatShowDate}}</text>
				<image class="zb-filter-right-icon" src="/static/down_gray_icon.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="zb-list">
			<account-book-cell v-for="(item,index) in dataList" :key="index" :params="item" :type="selectMenuType" @tap="showDetailAction(item)" ></account-book-cell>
		</view>
		<xh-empty :show="showEmpty"></xh-empty>
		<u-datetime-picker 
		v-model="filterDateStamp" 
		:show="showDate" 
		title="选择日期" 
		itemHeight="44"
		mode="year-month" 
		:min-date="31457616000" 
		:max-date="4102366416000" 
		confirmColor="#FF5A00"
		closeOnClickOverlay 
		@close="closeAction"
		@cancel="closeAction" 
		@confirm="okAction">
		</u-datetime-picker>
	</view>
</template>

<script setup>
	import { onLoad ,onPullDownRefresh} from "@dcloudio/uni-app"
	import { ref,computed } from "vue"
	import AccountBookCell from "./widgets/account-book-cell.vue"
	import { getAccountBookInfo,getAccountBookList } from "@/config/api.js"
	import dayjs, { Dayjs } from "dayjs"
	//筛选的类型：0：收入 1：结算
	const selectMenuType = ref(0)
	//是否显示日期选择器
	const showDate = ref(false)
	//筛选的日期时间戳
	const filterDateStamp = ref(Date.now())
	//今日收款笔数
	const todayNum = ref(0)
	//今日收款金额
	const todayMoney = ref(0)
	//开始日期
	let startDateString = ''
	//结束日期
	let endDateString = ''
	//列表数据
	const dataList = ref([])
	//是否显示空数据提示
	const showEmpty = ref(false)
	//格式化用于显示的筛选日期
	const formatShowDate = computed(()=>{
		return uni.$u.timeFormat(filterDateStamp.value,'yyyy年mm月')
	})
	onLoad(()=>{
		formatDateString()
		refreshData()
	})
	//下拉刷新
	onPullDownRefresh(()=>{
		refreshData()
	})
	//选择筛选类型
	const selectMenuTypeAction = (type)=>{
		selectMenuType.value = type
		dataList.value = []
		loadListData()
	}
	// 选择日期
	const showSelectDateAction = ()=>{
		showDate.value = true
	}
	//关闭
	const closeAction = ()=>{
		showDate.value = false
	}
	//确认选择日期
	const okAction = (res)=>{
		filterDateStamp.value = res.value
		showDate.value = false
		formatDateString()
		loadListData()
	}
	//查看账单详情
	const showDetailAction = (item)=>{
		uni.$u.route({
			url:'/pages/account-book/account-book-detail',
			params:item
		})
	}
	
	//获取开始喝结束日期
	const formatDateString = ()=>{
		let selectDate = uni.$u.timeFormat(filterDateStamp.value,'yyyy-mm')
		console.log(selectDate)
		const year = dayjs(selectDate).year()
		const month = (dayjs(selectDate).month() + 1).toString().padStart(2, '0')
		const maxDays = dayjs(selectDate).daysInMonth()
		startDateString = `${year}-${month}-01`
		endDateString = `${year}-${month}-${maxDays}`
	}
	//刷新
	const refreshData = ()=>{
		loadData()
		loadListData()
	}
	//加载数据
	const loadData = ()=>{
		//当前时间
		const currentDate = uni.$u.timeFormat(Date.now(),'yyyy-mm-dd')
	   getAccountBookInfo({txnStartTime:currentDate,txnEndTime:currentDate}).then(res=>{
		   todayNum.value = res.result.tradeNum
		   todayMoney.value = res.result.txnAmount
		   uni.stopPullDownRefresh()
	   }).catch(err=>{
		   uni.stopPullDownRefresh()
	   })
	}
	//加载账本列表数据
	const loadListData = ()=>{
		console.log(startDateString)
		console.log(endDateString)
		let params = {}
		if(selectMenuType.value == 1){
			params.settleStartTime = startDateString
			params.settleEndTime = endDateString
		}
		else{
			params.txnStartTime = startDateString
			params.txnEndTime = endDateString
		}
		getAccountBookList(params,selectMenuType.value).then(res=>{
			dataList.value = res.result
			showEmpty.value = uni.$u.test.isEmpty(res.result)
			 uni.stopPullDownRefresh()
		}).catch(err=>{
			 uni.stopPullDownRefresh()	   
		})
	}
	
</script>

<style lang="scss" scoped>
.zb-box{
	box-sizing: border-box;
	background-color: white;
	.zb-top-box{
		padding: 20rpx 30rpx 0 30rpx;
		.zb-top-bg{
			background-color: white;
			height: 330rpx;
			background-image: url('/static/zb_bg.png');
			background-size: cover;
			display: flex;
			flex-direction: column;
			color: white;
			font-size: 28rpx;
			align-items: center;
			justify-content: center;
			.zb-top-text-box{
				font-size: 28rpx;
				.zb-top-num-text{
					font-size: 36rpx;
					margin: 0 6rpx;
				}
			}
			.zb-top-money{
				font-size: 100rpx;
				font-weight: 600;
				margin-top: 20rpx;
			}
		}
	}
	.zb-filter-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 112rpx;
		background-color: white;
		border-bottom: 1px solid $xh-line-color;
		.zb-filter-left-box{
			display: flex;
			align-items: center;
			.zb-filter-left-menu-item {
				margin-right: 30rpx;
				font-size: 26rpx;
				color: $xh-subtitle-color;
				height: 100%;
			}
			.zb-filter-left-menu-item-active {
				color: $xh-title-color;
				font-size: 30rpx;
				font-weight: 500;
			}
		}
		.zb-filter-right-box{
			color: $xh-title-color;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			.zb-filter-right-icon{
				width: 24rpx;
				height: 24rpx;
				margin-left: 5rpx;
			}
		}
	}
	
}
</style>
